<template>
  <div>
    <div v-html="questionnaire"></div>

    <div
      :style="{
        position: 'absolute',
        left: 0,
        bottom: 0,
        right: 0,
        zIndex: 9,
        borderTop: '1px solid #e9e9e9',
        padding: '10px 20px',
        background: '#fff',
        textAlign: 'right'
      }"
    >
      <el-button @click="closeDialog">关 闭</el-button>
    </div>
  </div>
</template>
<script>
import { dictionary } from '@/utils/dictMixin';
import { formatdate } from '@/utils/index';
import { getQuestionnaire } from '@/api/customerCare/saleVisit/downfeedback';
export default {
  name: 'showQuestionnaire',
  mixins: [dictionary],
  props: {
    billId: String,
    questionnaireId: String,
    billType: Number,
  },
  data(){
    return {
      questionnaire: ''
    }
  },
  created() {
    this.createdQuestionnaire(this.questionnaireId,this.billId,this.billType);
  },
  methods: {
    closeDialog(type) {
      this.$emit('close', false, type);
    },
    createdQuestionnaire(questionnaireId,billId,billType){
      let html = "<div id='questionnaire'>";
      let data = {"questionnaireId":questionnaireId,'billId':billId,'billType':billType};
      getQuestionnaire(data).then(res=>{
        if(res.resultCode == 200){
          let i=0;
          res.data.forEach(row => {
            html += this.formatQuestionnaire(row,++i);
          })

          html += "</div>";
          this.questionnaire = html;
        }
      })
    },
    formatQuestionnaire(row,i){
      let isMustFilled = row.isMustFilled==10041001?"*":"";
      let html = "<div questionType='"+row.questionType+"' questionName='"+row.questionName+"' questionContent='"+row.questionContent+"' answerQuestionnaireId='"+row.answerQuestionnaireId+"' answerGroupId='"+row.answerGroupId+"' id='"+row.questionId+"' isMustFilled='"+row.isMustFilled+"'>"+i+"."+isMustFilled+"问题："+row.questionName;
      let isDisabeld = this.type == 'show'?"disabled":"";
      if(row.questionType === 15711001||row.questionType === 15711002){
        html += "<div style='margin-left:20px'>";
        row.answerList.forEach(answer=>{
          let isChecked = answer.isChecked==10041001?"checked":"";
          let type = row.questionType == 15711001?"radio":"checkbox";
          html+="<label><input disabled answerUsedId='"+answer.answerUsedId+"' answerSort='"+answer.answerSort+"' answerQuestionnaireId='"+answer.answerQuestionnaireId+"' answerId='"+answer.answerId+"' answer='"+answer.answer+"' id='"+row.questionId+"' "+isDisabeld+" "+isChecked+" name='"+row.questionId+"' type='"+type+"' value='' />"+answer.answer+" </label>";
        })
        html+="</div>";
      }else if(row.questionType === 15711003){
        if(row.value == null){
          row.value = '';
        }
        html+="<div style='margin-left:20px'><textarea disabled "+isDisabeld+" id='"+row.questionId+"' value="+row.value+" rows='2' style='width:500px;'>"+row.value+"</textarea></div></div>";
      }
      html+="</div>";
      return html;
    }
  }
}
</script>
